 window.onload=function(){



            function getClassName(tagName, className) {  
            if (document.getElementsByClassName) {
                return document.getElementsByClassName(className)
            }
            else {
                var nodes = document.getElementsByTagName(tagName),
                ret = []
                for (i = 0; i < nodes.length; i++) {
                    if (hasClass(nodes[i], className)) { ret.push(nodes[i]) }
                }
                return ret;
            }
        }


        function hasClass(node, className) {
            var names = node.className.split(/\s+/) //这个正则表达式是因为class可以有多个,判断是否包含
            for (i = 0; i < names.length; i++) {
                if (names[i] == className) return true;
            }
            return false;
        }



  function hasdClass(obj,cls){
        return obj.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));
    }
  
    function removeClass(obj,cls){
        if(hasdClass(obj,cls)){
            var reg=new RegExp("(\\s|^)"+cls+"(\\s|$)");
          obj.className=obj.className.replace(reg,"");
        }
    }


    function addClass(obj,cls){
         if(!hasdClass(obj,cls)){
            obj.className +=" "+cls;
         }
    }

     function getStyle (obj, attr) {
                  return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
                    }


        
          function Move(obj,json,fn) {  
            clearInterval(obj.timer);  
            obj.timer = setInterval(function () {  
                var bStop = true;  
                for(attr in json){  
                    
                    var objAttr = 0;  
                    if(attr == "opacity"){  
                        objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);  
                    }else{  
                        objAttr = parseInt(getStyle(obj,attr));  
                    }  
                   
                    var iSpeed = (json[attr] -objAttr)/10;  
                        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);  
                    
                    if(objAttr != json[attr]){  
                        bStop = false;  
                    }  
                    if(attr == "opacity"){  
                        obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';  
                        obj.style.opacity = (objAttr+iSpeed)/100;  
                    }else{  
                        obj.style[attr] =  objAttr+iSpeed+'px';
                    }  
                }  
                if(bStop){
                    clearInterval(obj.timer);  
                    if(fn){  
                        fn();  
                    }  
                }  
            },30);  
        }  
// 3D旋转效果开始
        var index=0;
        var z_dex=4;
        var content=document.getElementById('content');
        var content01=getClassName(content,'box')[0];
        var div=getClassName(content,'perspective');
        
        var next=document.getElementById('console').getElementsByTagName('span')[0].onclick=function(){
        	       if(index==-1){
            	index=0;
         return false;
            }
            if(index==7)
                return false;
            var bian=document.getElementById("xiaoxie0"+index);
            bian.style.transform="rotateY(-180deg)";
            bian.style.webkitTransform="rotateY(-180deg)";
            bian.style.mozTransform="rotateY(-180deg)";
            bian.style.mstTransform="rotateY(-180deg)";
            bian.style.oTransform="rotateY(-180deg)";
            bian.style.zIndex=z_dex;
            index++;
            z_dex++;
            var bian02=document.getElementById('xiaoxie0'+index);
            bian02.style.transform="rotateY(0deg)";
            bian02.style.webkitTransform="rotateY(0deg)";
            bian02.style.mozTransform="rotateY(0deg)";
            bian02.style.msTransform="rotateY(0deg)";
            bian02.style.oTransform="rotateY(0deg)";
            var bian03=document.getElementById("xiaoxie0"+(index-2));
            // bian03.style.display="none";
              console.log(index);
            
        }
        var persour=document.getElementById('console').getElementsByTagName('span')[1].onclick=function(){
        
            if(index==-1){
            	index=0;
         return false;
            }else{
            	    var bian=document.getElementById("xiaoxie0"+index);
            bian.style.transform="rotateY(0deg)";
            bian.style.webkitTransform="rotateY(0deg)";
            bian.style.mozTransform="rotateY(0deg)";
            bian.style.msTransform="rotateY(0deg)";
            bian.style.oTransform="rotateY(0deg)";
            bian.style.zIndex=z_dex;
            index--;
            z_dex++;
            var bian02=document.getElementById('xiaoxie0'+index);
            bian02.style.webkitTransform="rotateY(-180deg)";
            bian02.style.mozTransform="rotateY(-180deg)";
            bian02.style.mskTransform="rotateY(-180deg)";
            bian02.style.oTransform="rotateY(-180deg)";
            bian02.style.transform="rotateY(-180deg)";
            var bian03=document.getElementById("xiaoxie0"+(index+2));
            // bian03.style.display="none";
               console.log(index);
            }
            
           
                
        

        }
     


        // navbar开始
        var oli=document.getElementById("nav").getElementsByTagName('li');
        // var  omyself=document.getElementsByClassName("myself");

        // var oxiaoxie = ['27岁 应聘视觉设计师 期望薪资15K+','学历:大学本科  毕业学校:云南农业大学','8年ps,熟练ai ae fl,熟悉前端编程
        // 		3年工作经验','积极向上乐观  好学 喜欢研究新事物','<>点击查看'];
		var arr = ['27岁 应聘视觉设计师 前端工程师 期望薪资15K+','学历:大学本科  毕业学校:云南农业大学','8年ps经验 熟练ai ae fl等软件 熟悉前端编程 3年工作经验','积极向上乐观  好学 喜欢研究新事物','<a href="http://www.zcool.com.cn/u/13109523"> 点击查看</a>'];
         // console.log(myself.length);

        for (var i = 0; i < oli.length; i++) {
        	oli[i].index=i;
           oli[i].onmouseover=function(){
       
      
    	for (var i = 0; i < oli.length; i++) {
    		oli[i].className=" ";
    	}
    	this.className="active";
    	myself.innerHTML=arr[this.index];


 

    }
}


// 切换低版本
var ochange=document.getElementById('change');
var  opension=document.getElementById('pension');
var myparent=document.getElementById("myparent");
var myself=getClassName(myparent,"myself")[0];
var off=true;
ochange.onclick=function(){
    if(off){

                         Move(content,{
                       marginLeft:550
                      })
                   Move(pension,{
                        top:230,
                        opacity:100
                    })
                for (var i = 0; i < div.length; i++) {
                      
                    div[i].style.position="relative";
                    div[i].style.margin="auto";
                    div[i].style.webkitTransform="rotateY(0deg)";
                    div[i].style.mozTransform="rotateY(0deg)";
                    div[i].style.msTransform="rotateY(0deg)";
                    div[i].style.oTransform="rotateY(0deg)";
                    div[i].style.marginBottom="10%";
                    
                };
                myself.style.display="none";
                this.innerHTML="切换到高版本";
                   off=false
    }else{
           
                             Move(content,{
                           marginLeft:800
                          })
                          Move(pension,{
                        top:-200,
                        opacity:0
                    })

                             for (var i = 0; i < div.length; i++) {
                          
                        div[i].style.position="absolute";
                        div[i].style.transform="rotateY(0deg)";
                        div[i].style.webkitTransform="rotateY(0deg)";
                        div[i].style.mozTransform="rotateY(0deg)";
                        div[i].style.msTransform="rotateY(0deg)";
                        div[i].style.oTransform="rotateY(0deg)";
                        div[i].style.marginBottom="0";
                        div[i].style.zIndex=div.length-i;
                        // div[0].style.zIndex=7;
                        // div[1].style.zIndex=6;
                        // div[2].style.zIndex=5;
                        // div[3].style.zIndex=4;
                        // div[4].style.zIndex=3;
                        // div[5].style.zIndex=2;
                        // div[6].style.zIndex=1;
                    }
                     myself.style.display="block";
                        this.innerHTML="切换到低版本"
                        off=true;
                        window.location.reload(true); 
    }
     
}


// 悬浮制作
  $(window).scroll(function () {
                var top = $(document).scrollTop();
                var menu = $("#pension");
                var items = $("#content").find(".perspective");

// 请补充此处代码，让导航菜单实现在滚动条滚动的时候自动设置焦点
               var currentId = "";
                items.each(function(){
                    var t = $(this);
                    var itemTop = t.offset().top;
                    if(top > itemTop-300){
                        currentId = "#" + t.attr("id");
                    }else{
                        return false;
                    }
                });
                
                var currentLink = $("#pension").find(".active01");
                if(currentId && currentLink.attr("href")!=currentId){
                   currentLink.removeClass("active01");
                    menu.find("[href="+currentId +"]").addClass("active01");
                }  
                
            });
//图片放大
var img=content.getElementsByTagName('img');
for (var i = 0; i < img.length; i++) {
    img[i].onmouseover=function(){
        Move(this,{
         opacity:50
        })

    }
    img[i].onmouseout=function(){
        Move(this,
        {
            opacity:100
        })
    }
};



     }